<template>
  <div class="td-divider">
    <p class="adou-divider">
      <slot></slot>
    </p>
  </div>
</template>

<script>
export default {
  name: "TianDingDividerComponent"
};
</script>

<style lang="scss" scoped>
.td-divider {
  .adou-divider {
    display: table;
    white-space: nowrap;
    height: auto;
    overflow: hidden;
    line-height: 1;
    text-align: center;
    padding: 10px 0;
    color: #666;
    &:after {
      background-position: left 1em top 50%;
    }
    &:before {
      background-position: right 1em top 50%;
    }
    &:after,
    &:before {
      content: "";
      display: table-cell;
      position: relative;
      top: 50%;
      width: 50%;
      background-repeat: no-repeat;
      background-image: url("../../assets/images/line.png");
    }
  }
}
</style>


